<template>
  <div class="clist">
      <ul class="list">
        <li class="item" v-for="(l,i) in cinemas" :key="i" >
            <router-link :to="{
              name:'cinema-detail',
              params:filmId?{
                cinemaId:l.cinemaId,
                filmId:filmId,
                date:date
              }:{
                cinemaId:l.cinemaId,
              }
            }">
              <div class="item-top">
                <h4 class="name"> {{l.name}}</h4>
                <p class="price"> ￥{{l.lowPrice/100}}起</p>
              </div>
              <div class="item-one">
                <h5 class="address"> {{l.address}}</h5>
                <p class="dis">
                  <span v-if="l.Distance"> {{l.Distance/1000*1 | fixed }} KM</span>
                  <span v-else>距离未知</span>
                </p>
              </div>
            </router-link>
        </li>
      </ul>
  </div>
</template>

<script>
export default {
  props:['cinemas','date','filmId']
}
</script>

<style lang="scss" scoped>
.clist{
  margin-top:15px;
  padding-bottom:49px;
  .list{
    padding:0 15px;
    .item{
      padding:15px 0;
      height:75px;
      .item-top{
        display: flex;
        justify-content: space-between;
        align-items: center;
        .name{
            font-size: 15px;
            margin-bottom: 5px;
            color: #191a1b;
            overflow: hidden;
            -o-text-overflow: ellipsis;
            text-overflow: ellipsis;
            white-space: nowrap;
        }
        .price{
            font-size: 15px;
            color: #ff5f16;
            height: 0!important;
            display: inline-table!important;
        }
      }
      .item-one{
        display: flex;
        justify-content: space-between;
        align-items: center;
        .address{
          font-size: 13px;
          color: #797d82;
          overflow: hidden;
          -o-text-overflow: ellipsis;
          text-overflow: ellipsis;
          white-space: nowrap;
        }
        .dis{
            color: #797d82;
            font-size: 10px;
            line-height: 26px;
            width:70px;
            text-align: right;
        }
      }
    }
  }
}
</style>

